<template>
  <table-header
          :queryList="queryList"
          @pagination="getDataList"
          :rightColSpan="8"
          :leftColSpan="16"
  >
    <template #filter>
      <el-input
              placeholder="请输入子集名称"
              v-model="queryList.keyword"
              class="input-w mr10" size="mini"
              clearable
              @clear="handleFilterSeries"
              @keyup.enter="handleFilterSeries"
      />
      <el-select placeholder="请选择审核状态"
                 v-model="selectedState"
                 class="input-w" size="mini"
                 clearable
                 @change="handleFilterSeries"
      >
        <el-option
                v-for="state in stateList"
                :key="state.label + state.value"
                :label="state.label"
                :value="state.value"
        />
      </el-select>
    </template>
    <el-button type="primary" size="mini" @click="handleFilterSeries" class="ml10">
      <el-icon>
        <search />
      </el-icon>
      搜索
    </el-button>
    <template #operation>
      <el-button type="primary" size="mini" @click="handleBatchPassSeries">批量通过审核</el-button>
      <el-button type="warning" size="mini" @click="handleBatchNoPassSeries">批量不通过审核</el-button>
    </template>
  </table-header>
  <el-table
          ref="seriesTableRef"
          :data="tableData.listData"
          v-loading="isloading"
          border
          class="mt10"
          :height="tableHeight"
          @select="handleSelectRow"
          @select-all="handleSelectAllRow"
          @row-click="handleClickRow"
  >
    <el-table-column type="selection" width="50" align="center" />
    <el-table-column label="缩略图" width="60" align="center">
      <template #default="{row}">
        <span @click.stop>
          <el-image
                  v-if="typeof row.thumbs == 'object' && row.thumbs.length > 0"
                  :preview-src-list="srcList"
                  :initial-index="initialIndex(row.thumbs[0].viewurl)"
                  :src="row.thumbs[0].isself == 1 ? row.thumbs[0].viewurl + '&width=60px' : row.thumbs[0]"
          />
        </span>
      </template>
    </el-table-column>
    <el-table-column label="分集ID" align="center" width="120px">
      <template #default="{row}">
        <a href="javascript:;" @click.stop="handleSeriesInfo(row)">{{row.seriesid}}</a>
      </template>
    </el-table-column>
    <el-table-column label="分集名称" show-overflow-tooltip>
      <template #default="{row}">
        {{row.name}}
      </template>
    </el-table-column>
    <el-table-column label="节目集名称" show-overflow-tooltip>
      <template #default="{row}">
        {{row.media.name}}
      </template>
    </el-table-column>
    <el-table-column label="审核状态" align="center">
      <template #default="{row}">
        <el-tooltip
                v-if="row.comments"
                class="box-item"
                effect="dark"
                :content="row.comments"
                placement="right-start"
        >
          <span>{{getStateName(row.state)}}</span>
        </el-tooltip>
        <span v-else>{{getStateName(row.state)}}</span>
      </template>
    </el-table-column>
    <el-table-column label="操作" align="center">
      <template #default="{row}">
        <el-button type="text" size="mini" @click.stop="handleSeriesReviewLogs(row)">审核记录</el-button>
        <el-button v-if="row.state != 2" type="text" size="mini" @click.stop="handlePassSeries(row)">通过</el-button>
        <el-button v-if="row.state != 3" type="text" size="mini" style="color: red" @click.stop="handleNoPassSeries(row)">不通过</el-button>
      </template>
    </el-table-column>
  </el-table>
  <el-row class="mt10">
    <el-col :span="24">
      <table-pagination
              :queryList="queryList"
              :total="tableData.total"
              @pagination="getDataList"
      />
    </el-col>
  </el-row>
  <series-review-logs
          ref="seriesReviewLogsRef"
          :dialog-series-review-logs-seriesid="dialogSeriesReviewLogsSeriesid"
          :dialog-series-review-logs-title="dialogSeriesReviewLogsTitle"
          :dialog-series-review-logs-visible="dialogSeriesReviewLogsVisible"
          @handleCancelSeriesReviewLogsDialog="handleCancelSeriesReviewLogsDialog"
  />
  <series-info
          ref="seriesInfoRef"
          :dialog-series-info="dialogSeriesInfo"
          :dialog-series-info-title="dialogSeriesInfoTitle"
          :dialog-series-info-visible="dialogSeriesInfoVisible"
          @handleCancelSeriesInfoDialog="handleCancelSeriesInfoDialog"
  />
</template>

<script>
  import {computed, reactive, ref, nextTick,onMounted} from 'vue'
  import TableHeader from "@/views/public/TableHeader";
  import TablePagination from "@/views/public/TablePagination";
  import {postReviewSeries} from "@/api/media/review";
  import {ElMessage, ElMessageBox} from 'element-plus'
  import {getReviewSeries} from "@/api/media/media";
  import {Search} from "@element-plus/icons"
  import SeriesReviewLogs from "./components/SeriesReviewLogs";
  import SeriesInfo from "./components/SeriesInfo";

  export default {
    name: "index",
    components: {TablePagination, TableHeader, Search, SeriesReviewLogs, SeriesInfo},
    setup() {
      const queryList = reactive({
        page: 1,
        pagesize: 25,
        keyword: undefined,
        states: [1, 2, 3]
      })
      const isloading = ref(false)
      const tableData = reactive({
        total: 0,
        listData: []
      })
      const stateList = ref([
        {label: '提交审核', value: 1},
        {label: '审核通过', value: 2},
        {label: '审核不通过', value: 3},
      ])
      const srcList = ref([])
      const formData = reactive({
        state: 0,
        comments: '',
        seriesids: []
      })
      const seriesTableRef = ref(null)
      const selectedState = ref('')
      /** 子集审核记录参数开始 **/
      const dialogSeriesReviewLogsVisible = ref(false)
      const dialogSeriesReviewLogsTitle = ref('')
      const dialogSeriesReviewLogsSeriesid = ref(0)
      const seriesReviewLogsRef = ref(null)
      /** 子集审核记录参数结束 **/
      /** 子集详细信息参数开始 **/
      const dialogSeriesInfoVisible = ref(false)
      const dialogSeriesInfoTitle = ref('')
      const dialogSeriesInfo = reactive({
        seriesid: undefined,
        mediaName: ''
      })
      const seriesInfoRef = ref(null)
      /** 子集详细信息参数结束 **/
      //table高度自适应
      const tableHeight=ref()
      
      onMounted( () => {
        tableHeight.value =
        window.innerHeight - seriesTableRef.value.$el.offsetTop - 80;
        
      })
      /** 获取点击图片的index **/
      const initialIndex = computed(() => {
        return (src) => {
          const index = srcList.value.findIndex(item => {
            return item == src
          })
          return index
        }
      })

      /** 获取子集列表 **/
      const getDataList = () => {
        isloading.value = true
        getReviewSeries(queryList).then(response => {
          isloading.value = false
          const {total, list} = response.data
          tableData.total = total
          tableData.listData = list
          srcList.value = []
          tableData.listData.forEach((row) => {
            if (typeof row.thumbs == 'object' && row.thumbs.length > 0) {
              srcList.value.push(row.thumbs[0].viewurl)
            }
          })
        })
      }
      /** 搜索子集 **/
      const handleFilterSeries = () => {
        queryList.page = 1
        if (selectedState.value) {
          queryList.states = [selectedState.value]
        } else {
          queryList.states = [1, 2, 3]
        }
        getDataList()
      }
      /** 获取审核状态 **/
      const getStateName = (value) => {
        let stateName = ''
        stateList.value.forEach(state => {
          if (state.value == value) {
            stateName = state.label
          }
        })
        return stateName
      }
      /** 通过审核 **/
      const handlePassSeries = (row) => {
        formData.state = 2
        formData.seriesids = []
        formData.seriesids.push(row.seriesid)
        handlePutReviewSeries()
      }
      /** 不通过审核 **/
      const handleNoPassSeries = (row) => {
        formData.state = 3
        formData.seriesids = []
        formData.seriesids.push(row.seriesid)
        handlePutReviewSeries()
      }
      /** 批量通过审核 **/
      const handleBatchPassSeries = () => {
        formData.state = 2
        if (formData.seriesids.length <= 0) {
          ElMessage({type: 'warning', message: '请选择要操作的子集', duration: 2000})
        } else {
          handlePutReviewSeries()
        }
      }
      /** 批量不通过审核 **/
      const handleBatchNoPassSeries = () => {
        formData.state = 3
        if (formData.seriesids.length <= 0) {
          ElMessage({type: 'warning', message: '请选择要操作的子集', duration: 2000})
        } else {
          handlePutReviewSeries()
        }
      }
      /** 提交审核 **/
      const handlePutReviewSeries = () => {
        ElMessageBox.prompt('请填写审核意见（选填）', '审核意见', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          inputType: 'textarea',
          inputPlaceholder: '请输入审核意见',
        }).then(({value}) => {
          formData.comments = value
          postReviewSeries(formData).then(response => {
            if (response.errcode == 0) {
              ElMessage({type: 'success', message: response.msg, duration: 2000})
              formData.seriesids = []
              getDataList()
            } else {
              ElMessage({type: 'success', message: response.msg, duration: 2000})
            }
          })
        }).catch(() => {})
      }
      /** 选择子集 **/
      const handleSelectRow = (selection, row) => {
        getFormData(row)
      }
      /** 全选 **/
      const handleSelectAllRow = (selection) => {
        if (selection.length > 0) {
          selection.forEach(row => {
            if (!formData.seriesids.includes(row.seriesid)) {
              formData.seriesids.push(row.seriesid)
            }
          })
        } else {
          formData.seriesids = []
        }
      }
      /** 点击table事件 **/
      const handleClickRow = (row) => {
        getFormData(row)
      }
      /** 获取选择数据 **/
      const getFormData = (row) => {
        if (formData.seriesids.includes(row.seriesid)) {
          const index = formData.seriesids.findIndex(d => d == row.seriesid)
          formData.seriesids.splice(index, 1)
          seriesTableRef.value.toggleRowSelection(row, false)
        } else {
          formData.seriesids.push(row.seriesid)
          seriesTableRef.value.toggleRowSelection(row, true)
        }
      }
      /** 查看子集审核记录 **/
      const handleSeriesReviewLogs = (row) => {
        dialogSeriesReviewLogsTitle.value = '子集 ' + row.name + ' 审核记录'
        dialogSeriesReviewLogsSeriesid.value = row.seriesid
        dialogSeriesReviewLogsVisible.value = true
        nextTick(() => {
          seriesReviewLogsRef.value.getDataList()
        })
      }
      /** 关闭子集审核记录 **/
      const handleCancelSeriesReviewLogsDialog = () => {
        dialogSeriesReviewLogsVisible.value = false
      }
      /** 查看子集详细信息 **/
      const handleSeriesInfo = (row) => {
        dialogSeriesInfo.seriesid = row.seriesid
        dialogSeriesInfo.mediaName = row.media.name
        dialogSeriesInfoTitle.value = '子集 ' + row.name + ' 详细信息'
        dialogSeriesInfoVisible.value = true
        nextTick(() => {
          seriesInfoRef.value.handleGetSeriesInfo()
        })
      }
      /** 关闭子集详细信息 **/
      const handleCancelSeriesInfoDialog = () => {
        dialogSeriesInfoVisible.value = false
      }

      const init = () => {
        getDataList()
      }

      init()

      return {
        queryList,
        isloading,
        tableData,
        getDataList,
        stateList,
        handleFilterSeries,
        getStateName,
        srcList,
        initialIndex,
        handlePassSeries,
        handleNoPassSeries,
        handleBatchPassSeries,
        handleBatchNoPassSeries,
        handleSelectRow,
        handleSelectAllRow,
        handleClickRow,
        seriesTableRef,
        selectedState,
        dialogSeriesReviewLogsSeriesid,
        dialogSeriesReviewLogsTitle,
        dialogSeriesReviewLogsVisible,
        handleSeriesReviewLogs,
        handleCancelSeriesReviewLogsDialog,
        seriesReviewLogsRef,
        handleSeriesInfo,
        dialogSeriesInfo,
        dialogSeriesInfoTitle,
        dialogSeriesInfoVisible,
        handleCancelSeriesInfoDialog,
        seriesInfoRef,
        tableHeight
      }
    }
  }
</script>

<style lang="scss">
  .el-message-box__input{
    padding-top:5px;
    .el-textarea__inner{height:100px;}
    }
</style>
